<template>
  <div class="dashboard">
    <el-card class="box-card box-card-container">
      <div slot="header" class="clearfix">
        <h1>{{ loginUsername }} 的个人博客管理系统</h1>
      </div>
      <div class="chart-fa">
        <!-- 文章分类情况统计 -->
        <el-card class="box-card">
          <div id="myChartPie" class="chart"></div>
        </el-card>
        <!-- 近7日作品数据 (评论, 点赞, 阅读) -->
        <el-card class="box-card">
          <div id="myChartStacked" class="chart"></div>
        </el-card>
        <!-- 每月发文数量统计 -->
        <el-card class="box-card">
          <div id="myChartBar" class="chart"></div>
        </el-card>
        <el-card class="box-card"
          ><div class="chart">
            <img src="/todo.png" alt="" />
            <a href="http://localhost:80" target="_blank"
              ><el-button type="primary">去前台</el-button></a
            >
          </div>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  components: {},
  created() {},
  mounted() {
    // 发送请求, 获取登录用户的信息
    this.$http.get('/login/getinfo').then((res) => {
      // console.log('login-res', res)
      const { code, result } = res
      if (code == 0) {
        this.loginUsername = result.nickname
      }
    })
    // 发送请求, 获取不同分类对应的文章数
    this.$http
      .get('/articles?type=category_stat')
      .then((res) => {
        const { code, result } = res
        if (code == 0) {
          result.forEach((item) => {
            this.dataPie.push({
              name: item.category,
              value: item.count,
            })
          })
          this.drawPie()
        }
      })
      .catch((res) => {
        // console.log('res', res)
      })
    // 查询每个月份对应的文章记录数
    this.$http.get('/articles?type=month_stat').then((res) => {
      const { code, result } = res
      if (code == 0) {
        this.dataBar[0] = []
        this.dataBar[1] = []
        result.forEach((item) => {
          this.dataBar[0].push(item.year + '-' + item.month)
          this.dataBar[1].push(item.count)
        })
        this.drawBar()
      }
    })
    // 查询近7天每天的评论数
    this.$http.get('/comments/stat').then((res) => {
      const { code, result } = res
      if (code == 0) {
        let data = result.reverse()
        data.forEach((item) => {
          // this.dataStakedLine.x.push(item.date)
          this.dataStakedLine.x.push(item.week.substr(0, 3))
          this.dataStakedLine.y.push(item.num)
        })
        this.drawStakedLine()
      }
    })
  },
  data() {
    return {
      // 用户信息
      loginUsername: '',
      // 饼图数据源
      dataPie: [],
      // 柱状图数据源
      dataBar: [[], []],
      // 线性图数据与
      dataStakedLine: { x: [], y: [] },
    }
  },
  methods: {
    // 绘制饼图
    drawPie() {
      // 基于准备好的dom，初始化echarts实例
      let myChartPie = this.$echarts.init(document.getElementById('myChartPie'))

      let pieColors = [
        '#9FE6B8',
        '#FFDB5C',
        '#ff9f7f',
        '#fb7293',
        '#E062AE',
        '#E690D1',
        '#37A2DA',
        '#32C5E9',
        '#67E0E3',
        '#e7bcf3',
        '#9d96f5',
        '#8378EA',
        '#96BFFF',
      ]
      let richColor = {}
      pieColors.forEach((item, idx) => {
        richColor[`color${idx}`] = {
          fontSize: 18,
          color: item,
        }
      })

      let chartData = this.dataPie

      let option = {
        title: {
          text: '文章分类情况统计',
          // x: 'center',
          y: 'top',
        },
        tooltip: {}, //鼠标hover, 显示详情
        color: pieColors,
        itemStyle: {
          borderRadius: 8,
        },
        series: [
          {
            name: '文章分类',
            type: 'pie',
            radius: ['40%', '75%'],
            avoidLabelOverlap: false,
            label: {
              formatter: (params) => {
                // console.log(params)
                return `{color${params.dataIndex}|${params.name}(${params.value})}`
              },
              rich: richColor,
            },
            labelLine: {
              lineStyle: {
                width: 3,
              },
            },
            data: chartData,
          },
          {
            name: '文章总数',
            type: 'pie',
            radius: ['0%', '0%'],
            itemStyle: {
              // 防止鼠标悬浮到标签时出现放大的点
              color: 'transparent',
            },
            label: {
              position: 'inside',
              formatter: `{data|{c}}\n{serie|{a}}`,
              rich: {
                data: {
                  fontWeight: 'bold',
                  fontSize: 35,
                  color: `#555`,
                  lineHeight: 38,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
                serie: {
                  fontSize: 18,
                  color: `#acbac6`,
                  lineHeight: 28,
                  textBorderColor: `transparent`,
                  textBorderWidth: 0,
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              // 计算表格数据value总和
              chartData.reduce((prev, cur) => prev + cur.value, 0),
            ],
          },
        ],
      }

      // 绘制图表
      myChartPie.setOption(option)
    },
    // 绘制柱状图
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      let myChartBar = this.$echarts.init(document.getElementById('myChartBar'))
      // 绘制图表
      myChartBar.setOption(this.lineOption)

      window.onresize = function resize() {
        myChartBar.resize()
      }
    },
    // 绘制折线图
    drawStakedLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChartStackedLine = this.$echarts.init(
        document.getElementById('myChartStacked')
      )
      // 绘制图表
      myChartStackedLine.setOption(this.stakedLineOption)

      window.onresize = function resize() {
        myChartStackedLine.resize()
      }
    },
  },
  computed: {
    // 饼图配置对象
    // pieOptions() {
    //   return {
    //     title: {
    //       text: '文章分类情况统计',
    //       x: 'center',
    //       y: 'top',
    //     },
    //     series: [
    //       {
    //         name: '文章分类',
    //         type: 'pie',
    //         radius: '55%',
    //         data: this.dataPie,
    //         // data: [
    //         //   { value: 235, name: '视频广告' },
    //         //   { value: 274, name: '联盟广告' },
    //         // ],
    //       },
    //     ],
    //     label: {
    //       formatter: function (data) {
    //         return `${data.name} ${data.value}
    //         (${data.percent.toFixed(1)}%)`
    //       },
    //     },
    //     legend: {
    //       // Try 'horizontal'
    //       orient: 'vertical',
    //       right: 10,
    //       bottom: 10,
    //     },
    //     itemStyle: {
    //       normal: {
    //         shadowBlur: 200,
    //         shadowColor: 'rgba(0, 0, 0, 0.5)',
    //       },
    //     },
    //     textStyle: {
    //       color: '#666',
    //     },
    //     roseType: 'angle',
    //   }
    // },
    // 柱状图配置对象
    barOptions() {
      return {
        title: {
          text: '每月发表文章数量统计',
          x: 'center',
          y: 'top',
        },
        tooltip: {},
        xAxis: {
          data: this.dataBar[0],
          // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '发表文章数量',
            type: 'bar',
            data: this.dataBar[1],
            // data: [5, 20, 36, 10, 10, 20],
          },
        ],
        textStyle: {
          color: '#666',
        },
      }
    },
    // 折线图配置对象
    lineOption() {
      return {
        title: {
          text: '每月发表文章数量统计',
          x: 'center',
          y: 'top',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: this.dataBar[0],
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '发表文章数量',
            data: this.dataBar[1],
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true,
          },
        ],
      }
    },
    // 多折线
    stakedLineOption() {
      return {
        title: {
          text: '近7日作品数据',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['评论', '点赞', '浏览', '收藏'],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          data: this.dataStakedLine.x,
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: '评论',
            type: 'line',
            stack: 'Total',
            // data: [120, 132, 101, 134, 90, 230, 0],
            data: this.dataStakedLine.y,
            smooth: true,
          },
          {
            name: '浏览',
            type: 'line',
            data: [2, 3, 3, 3, 7, 6, 3],
            smooth: true,
          },
          {
            name: '点赞',
            type: 'line',
            data: [4, 5, 2, 1, 1, 1, 1],
            smooth: true,
          },
        ],
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
/* .dashboard, */
.box-card-container
  height: calc(100vh - 150px)
  .clearfix
    display: flex
    justify-content: center
.dashboard h1
  font-size: 55px
  font-weight: 400
  font-family: '隶书'
  color: #555
.chart-fa
  display: flex
  justify-content: space-around;
  flex-wrap: wrap
  // margin-top: 5px
  height: 100%
  width: 100%
  .chart
    /* width: 650px;
    height: 450px; */
    display flex
    align-items end
    margin-top 10px
    width: calc(35vw)
    height: calc(28vh)
</style>
